<!DOCTYPE html>
<html>
    <head lang="zh">
        <meta http-equiv="Content-Type" content="text/html ;charset=utf-8">
        <meta name="google" content="notranslate" />
        <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"/>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="shortcut icon" type="image/x-icon" href="{{URL::asset('handan/images/logo-icon.png')}}" />
        <title>EAI交易圈</title>
        <link rel="stylesheet" href="{{ URL::asset('index/css/base.css') }}"/>
    </head>
    <body>
        <div id="box_echarts" style="width:1000px;height:600px;"></div>
    </body>
</html>
<script src="{{URL::asset('public_js/jquery-3.2.1.min.js')}}"></script>
<script src="{{ URL::asset('public_js/src/echarts.js') }}"></script>
<script src="{{ URL::asset('js/layer/layer.js') }}"></script>
<script>
var time_str_data = [];  //
var time_str    = '{{$time_str}}';
// 时间分布图
time_str     = dataFn(time_str,time_str_data);
//数据解析函数
function dataFn(id,idData){
    id = id.split(';');
    id.forEach(function(data,index,arr){
        var aa = data.split(',');
        var xaa = [];
        aa.forEach(function(data1,index1,arr1){
            if(index1 == 0){
                xaa.push(data1);
            }else{
                xaa.push(+data1);
            }
        })
        idData.push(xaa);
    });
}
//散点图函数调用
charts_one('box_echarts',time_str_data);
// 散点图表函数封装
function charts_one(id,data_one){
    var myChartB = echarts.init(document.getElementById(id));
    option = {
        title : {
            text: '时间分布',// 标题
            subtext: '抽样调查来自: Heinz  2003'
        },
        grid: {
            left: '3%',// Y坐标轴向左移动
            right: '7%',// Y坐标轴向右移动
            bottom: '3%',// 坐标图距离上边的距离
            containLabel: true  //为true是图表的宽度不会被超出隐藏
        },
        tooltip : {
            // trigger: 'axis', //触发鼠标移入的事件
            showDelay : 0,  //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置
            formatter : function (params) {  //用来格式化图例文本，支持字符串模板和回调函数两种形式
                if (params.value.length > 1) {
                    return params.seriesName + ' :<br/>'
                    + params.value[0] + '日 '
                    + params.value[1] + 'Hour ';
                }
                else {
                    return params.seriesName + ' :<br/>'
                    + params.name + ' : '
                    + params.value + 'Hour ';
                }
            },
            axisPointer:{  //是配置坐标轴指示器的快捷方式
                show: true,  //是否显示文本标签
                type : 'axis', //十字准星指示器。其实是种简写，表示启用两个正交的轴的
                lineStyle: {
                    type : 'dashed',
                    width : 1
                }
            }
        },
        toolbox: { //是否显示工具栏组件
            feature: {//自定义的工具名字必须以my命名开头
                dataZoom: {},  //数据区域缩放。目前只支持直角坐标系的缩放。
                brush: { //选框组件的控制按钮
                    type: ['rect', 'polygon', 'clear']//'rect'：开启矩形选框选择功能。'polygon'：开启任意形状选框选择功能。'lineX'：开启横向选择功能。'lineY'：开启纵向选择功能。'keep'：切换『单选』和『多选』模式。后者可支持同时画多个选框。前者支持单击清除所有选框。'clear'：清空所有选框。
                }
            }
        },
        brush: {
        },
        legend: {// 标题栏以及位置
            data: ['时间分布'],//,'止盈点位','止损点位'
            left: 'center'
        },
        xAxis : [//直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
            {
                type : 'time',//'value' 数值轴，适用于连续数据'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据。
                scale:true,//只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
                axisLabel : {//坐标轴刻度标签的相关设置。
                    formatter: '{value} 日'//刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
                },
                splitLine: {//坐标轴在 grid 区域中的分隔线。
                    show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                scale:true,
                axisLabel : {
                    formatter: '{value} Hour'
                },
                splitLine: {
                    show: true
                },
                interval:4,
                max:24
            }
        ],
        series : [
            {
                name:'时间分布',
                type:'scatter',
                data: data_one,
                markArea: {
                    silent: true,
                    itemStyle: {
                        normal: {
                            color: 'transparent',//选区背景颜色
                            borderWidth: 1,  //边框
                            borderType: 'dashed'   //虚线
                        }
                    },
                    data: [[{
                        name: '时间分布区间',
                        xAxis: 'min',
                        yAxis: 'min'
                    }, {
                        xAxis: 'max',
                        yAxis: 'max'
                    }]]
                },
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    lineStyle: {
                        normal: {
                            type: 'solid'
                        }
                    },
                    data : [
                        {type : 'average', name: '平均值'},
                        { xAxis: 160 }
                    ]
                }
            }
        ]
    };
    myChartB.setOption(option);
}
</script>
